import { Button } from 'antd'
import { useDispatch, useSelector } from 'react-redux'

import numStatus from '@/store/NumStatus'

const View = () => {
  const dispatch = useDispatch()

  const { num } = useSelector((state: RootState) => ({
    num: state.NumStatusReducer.num,
  }))

  const changeNum = () => {
    dispatch({
      type: 'add',
      // payload: num + 1,
    })
  }

  const asyncChangeNum = () => {
    dispatch(numStatus.asyncActions.asyncAdd)
  }

  const { sarr } = useSelector((state: RootState) => ({
    sarr: state.ArrStatusReducer.sarr,
  }))

  const changeArr = () => {
    dispatch({
      type: 'sarrPush',
      val: 100,
    })
  }

  return (
    <>
      <div>这是page1</div>
      <div>{num}</div>
      <Button type="primary" onClick={changeNum}>
        同步+1
      </Button>
      <Button onClick={asyncChangeNum}>异步+1</Button>
      <div>
        {sarr.map((item) => (
          <div>{item}</div>
        ))}
      </div>
      <Button type="primary" onClick={changeArr}>
        修改数组
      </Button>
    </>
  )
}

export default View
